<template>
  <v-layout type="main">

    <div class="alike-lis-header">
      <div class="lis-header-left">
        <div class="add-btn" @click="$router.push({ path: '/modelGameModel/detail' })">+ 新增模型</div>

        <div class="btns-switch">
          <div @click="isCard = true">
            <img src="@/assets/img/List_card.png" v-if="isCard">
            <img src="@/assets/img/list_nocard.png" v-else>
          </div>
          <div @click="isCard = false">
            <img src="@/assets/img/list_nolist.png" v-if="isCard">
            <img src="@/assets/img/list_list.png" v-else>
          </div>
        </div>

        <div class="search-box">
          <el-input prefix-icon="el-icon-search" v-model="Pagedata.name" class="search" placeholder="" @input="getData" />
        </div>
      </div>

      <div class="lis-header-right">
        <el-select size="mini" placeholder="请选择" v-model="showThisActive" @change="getData">
          <el-option label="我的模型" value="0"></el-option>
          <el-option label="共享模型" value="1"></el-option>
        </el-select>
      </div>
    </div>


    <div class="has-ver-table-layout">
      <div class="table-layout" v-if="!isCard">
        <el-table :data="tableData" class="myself-table">
          <el-table-column prop="name" label="名称">
            <template slot-scope="{ row }">
              <!-- <el-popover placement="right-start" width="320" trigger="hover">
                <row-data :row="row" />
                <el-button type="text" @click="$router.push({ path: '/notebook/code', query: { id: row.id } })"
                  slot="reference">{{ row.name }}</el-button>
              </el-popover> -->

              <!-- <el-button type="text" @click="$router.push({ path: '/notebook/code', query: { id: row.id } })"
                slot="reference">{{ row.name }}</el-button> -->

              <el-button type="text" @click="drawerShowHandler(row)" slot="reference">{{ row.name }}</el-button>
            </template>
          </el-table-column>

          <el-table-column prop="desc" label="描述信息">
            <template slot-scope="{ row }">
              <el-popover placement="top" width="320" trigger="hover" :content="row.desc">
                <span class="desc" slot="reference">{{ row.desc }}</span>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column prop="create_user.nick_name" label="创建用户" align="center" />
          <el-table-column prop="update_user.nick_name" label="更新用户" align="center" />
          <el-table-column prop="update_time" label="更新时间" />

          <!-- <el-table-column label="运行时长">
            <template slot-scope="{ row }">
              {{ countRanTime(row.resource && row.resource.start_time) }}
            </template>
          </el-table-column> -->

          <el-table-column label="操作" width="200">
            <template slot-scope="{ row }">
              <!--<el-button type="text" @click="put(row)">修改</el-button>-->
              <!-- <el-button type="text" @click="del(row)">删除</el-button> -->
              <!-- <el-popconfirm title="确定删除吗？" @onConfirm="delModel(row.id)">
                <el-button type="text" slot="reference">删除</el-button>
              </el-popconfirm> -->
              <el-popover placement="top" width="80" trigger="click" v-model="row.visible">
								<p>您确定要删除吗？</p>
								<div style="text-align: right; margin: 0">
									<el-button size="mini" type="text" @click="row.visible = false">取消</el-button>
									<el-button type="primary" size="mini" @click="delTable(row)">确定</el-button>
								</div>
								<el-button type="text" slot="reference">删除</el-button>
							</el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <ul class="alike-lis" v-else>
        <li v-for="(item, index) in tableData" :key="index">
          <div class="alike-lis-box">
            <div @click="$router.push({ path: '/modelGameModel/code', query: { id: item.id } })">
              <v-image class="alike-lis-pic" :src="item.avatar ? item.avatar : require('@/assets/img/drone3.jpg')"
                alt="" />
            </div>
            <div class="alike-lis-word">
              <p class="alike-lis-title">
                <span>
                  <span @click="$router.push({ path: '/modelGameModel/code', query: { id: item.id } })">{{ item.name }}</span>
                </span>

                <el-popover placement="top" width="80" trigger="click" v-model="item.visible">
                  <p>您确定要删除吗？</p>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="text" @click="item.visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="delModel(item.id)">确定</el-button>
                  </div>
                  <i slot="reference" class="el-icon-delete delete-btn" />
                </el-popover>
              </p>
              <p class="alike-lis-hint">{{ item.desc }}</p>
              <p class="alike-lis-hint">版本数量：{{ item.version_index }}</p>

              <div class="alike-lis-user">
                <span class="user-name">创建人：{{ item.create_user.nick_name }}</span>
                <span class="date">{{ item.create_time }}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="pagination-box" v-if="Pagedata.total > Pagedata.pageSize">
      <el-pagination background class="pagination" layout="total, prev, pager, next, jumper"
        :page-size="Pagedata.pageSize" :current-page.sync="Pagedata.pageNum" @current-change="handleCurrentChange"
        :total="Pagedata.total">
      </el-pagination>
    </div>

    <el-drawer title="版本列表" :visible.sync="drawerShow" direction="rtl">
      <ul class="version-list">
        <li class="version-item" v-for="item in current.latest_versions" :key="item.id"
          @click="$router.push({ path: '/task/code', query: { id: current.id } })">
          <p>
            <span class="title">{{ item.version }}</span>
            <span class="update-time">更新时间：{{ item.update_time }}</span>
          </p>
          <span class="commit">{{ item.commit_msg || "暂无版本提交信息" }}</span>
        </li>
      </ul>
    </el-drawer>
  </v-layout>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getModels, delModel } from "@/api/model"
import { delModelVersion } from "@/api/modelversion"
export default {
  data() {
    return {
      showThisActive: "0",
      list_flag: false,
      tableData: [],
      Pagedata: {
        pageNum: 1,
        pageSize: 12,
        total: 0,
      },
      isCard: true,
      drawerShow: false,
      current: {}
    };
  },
  async created() {
    this.Pagedata = { ...this.Pagedata, pageNum: this.pageNum }
  },
  mounted() {
    this.getData()
  },
  computed: mapState({
    pageNum: state => state.menuStore.pageData.pageNum
  }),
  methods: {
    ...mapActions(["updatePageNum"]),
    drawerShowHandler(row) {
      this.drawerShow = true;
      this.current = row;
    },
    async getData() {
      let res = await getModels({ visibility: this.showThisActive, type: 2, ...this.Pagedata })
      this.tableData = res.data.list
      this.Pagedata.total = res.data.total
    },
    async delModel(id) {
      console.log("id", id)
      // let res = await this.$isDel();
      // if (res) {
      await delModel({ id })
      this.getData()
      // }
    },
    stop(row) {
      console.log(row)
    },
    async del(row) {
      // let res = await this.$isDel();
      // if (res) {
      await delModelVersion(row)
      this.getData()
      // }
    },
    async delTable(row) {
			await delModel(row);
			this.getData();
		},
    setListOrGraph() {
      this.list_flag = !this.list_flag
    },
    handleCurrentChange(val) {
      this.Pagedata.pageNum = val
      this.updatePageNum(val);
      this.getData()
    },
  }
}
</script>
<style lang="less" scoped>
.switch {
  display: flex;
  justify-content: space-between;

  // overflow: hidden;
  // padding-right: 500px;
  span {
    padding-right: 20px;
  }

  a {
    float: left;
    width: 20px;
    height: 20px;
    margin-left: 14px;
    margin-top: 10px;
    background-color: #767676;
  }

  .btn-pic {
    mask: url(~@/assets/img/file-icon/btn-pic.svg);
    mask-size: 20px 20px;
  }

  .btn-lis {
    mask: url(~@/assets/img/file-icon/btn-lis.svg);
    mask-size: 20px 20px;
  }

  .acticv {
    background-color: #409EFF;
  }

  .add-btn {
    float: left;
  }
}

.version-list {
  padding: .625rem 0;

  .version-item {
    line-height: 2em;
    padding: .625rem 1.25rem;
    border-bottom: 1px solid #eee;
    cursor: pointer;

    &:hover {
      background: #eee;
    }

    p {
      display: flex;
      justify-content: space-between;
      padding: .3125rem 0;
    }

    .title {
      font-size: 20px;
    }

    .commit {
      color: #808080;
      display: -webkit-inline-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      white-space: normal;
      width: 90%;
    }
  }
}
</style>